<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Poems</title>
    <script src="../static/js/jquery-3.4.1.min.js"></script>
<meta name="description" content="An implementation of Gil Huybrecht's Outdoors design" />
<meta name="keywords" content="template, web design, html, javascript, layout, css, slide out" />
<meta name="author" content="Codrops" />
<link rel="shortcut icon" href="favicon.ico">
<link href="https://fonts.googleapis.com/css?family=Montserrat:300,400,700" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="../static/css/normalize.css" />
<link rel="stylesheet" type="text/css" href="../static/css/base.css" />

<script>document.documentElement.className="js";var supportsCssVars=function(){var e,t=document.createElement("style");return t.innerHTML="root: { --tmp-var: bold; }",document.head.appendChild(t),e=!!(window.CSS&&window.CSS.supports&&window.CSS.supports("font-weight","var(--tmp-var)")),t.parentNode.removeChild(t),e};supportsCssVars()||alert("Please view this demo in a modern browser that supports CSS Variables.");</script>
</head>
<body class="loading">
<svg class="hidden">
	<symbol id="icon-arrow" viewBox="0 0 24 24">
		<title>arrow</title>
		<polygon points="6.3,12.8 20.9,12.8 20.9,11.2 6.3,11.2 10.2,7.2 9,6 3.1,12 9,18 10.2,16.8 "/>
	</symbol>
	<symbol id="icon-drop" viewBox="0 0 24 24">
		<title>drop</title>
		<path d="M12,21c-3.6,0-6.6-3-6.6-6.6C5.4,11,10.8,4,11.4,3.2C11.6,3.1,11.8,3,12,3s0.4,0.1,0.6,0.3c0.6,0.8,6.1,7.8,6.1,11.2C18.6,18.1,15.6,21,12,21zM12,4.8c-1.8,2.4-5.2,7.4-5.2,9.6c0,2.9,2.3,5.2,5.2,5.2s5.2-2.3,5.2-5.2C17.2,12.2,13.8,7.3,12,4.8z"/><path d="M12,18.2c-0.4,0-0.7-0.3-0.7-0.7s0.3-0.7,0.7-0.7c1.3,0,2.4-1.1,2.4-2.4c0-0.4,0.3-0.7,0.7-0.7c0.4,0,0.7,0.3,0.7,0.7C15.8,16.5,14.1,18.2,12,18.2z"/>
	</symbol>
	<symbol id="icon-menu" viewBox="0 0 24 13">
		<title>menu</title>
		<path d="M.75 1.515h22.498a.75.75 0 0 0 0-1.5H.75a.75.75 0 0 0 0 1.5zM23.248 5.265H8.168a.75.75 0 0 0 0 1.5h15.08a.75.75 0 0 0 0-1.5zM23.248 10.514H4.322a.75.75 0 0 0 0 1.5h18.926a.75.75 0 0 0 0-1.5z"/>
	</symbol>
	<symbol id="icon-dot" viewBox="0 0 24 24">
		<title>dot</title>
		<path d="M11.5 9c-.69 0-1.28.244-1.768.732A2.41 2.41 0 0 0 9 11.5c0 .69.244 1.28.732 1.767A2.409 2.409 0 0 0 11.5 14c.69 0 1.28-.244 1.768-.733A2.408 2.408 0 0 0 14 11.5c0-.69-.244-1.28-.732-1.768A2.408 2.408 0 0 0 11.5 9z"/>
	</symbol>
	<symbol id="icon-cross" viewBox="0 0 24 24">
		<title>cross</title>
		<path d="M11.449 11.962l-5.1 5.099a.363.363 0 1 0 .513.512L12 12.436l5.137 5.137a.361.361 0 0 0 .513 0 .363.363 0 0 0 0-.512l-5.099-5.1 5.102-5.102a.363.363 0 1 0-.512-.513L12 11.487l-5.141-5.14a.363.363 0 0 0-.513.512l5.103 5.103z"/>
	</symbol>
	<symbol id="icon-arrowlong" viewBox="0 0 32 11">
		<title>arrow-long</title>
		<path d="M27.166.183a.619.619 0 0 0-.878 0 .619.619 0 0 0 0 .878l2.735 2.735H.768a.624.624 0 0 0 0 1.248h28.254L26.287 7.77a.619.619 0 0 0 0 .878.617.617 0 0 0 .441.183c.163 0 .32-.061.442-.183l3.796-3.796a.623.623 0 0 0-.005-.878L27.166.183z"/>
	</symbol>
	<symbol id="icon-close" viewBox="0 0 24 24">
		<title>close</title>
		<path d="M21 4.565L19.435 3 12 10.435 4.565 3 3 4.565 10.435 12 3 19.435 4.565 21 12 13.565 19.435 21 21 19.435 13.565 12z"/>
	</symbol>
	<symbol id="icon-navup" viewBox="0 0 50 50">
		<title>navup</title>
		<path d="M20.259 28.211l5.07-5.03 5.075 5.034a.36.36 0 0 0 .51 0 .356.356 0 0 0 0-.506l-5.323-5.28a.404.404 0 0 0-.135-.084.364.364 0 0 0-.384.08l-5.324 5.28a.356.356 0 0 0 0 .506c.141.14.37.14.51 0z" />
	</symbol>
	<symbol id="icon-navdown" viewBox="0 0 50 50">
		<title>navdown</title>
		<path d="M20.259 22.43l5.07 5.03 5.075-5.034a.36.36 0 0 1 .51 0c.14.14.14.366 0 .506l-5.323 5.28a.404.404 0 0 1-.135.084.364.364 0 0 1-.384-.081l-5.324-5.28a.356.356 0 0 1 0-.505c.141-.14.37-.14.51 0z" />
	</symbol>
	<symbol id="icon-grid" viewBox="0 0 24 24">
		<title>grid</title>
		<path d="M8.982 8.982h5.988v5.988H8.982zM0 0h5.988v5.988H0zM8.982 17.965h5.988v5.988H8.982zM0 8.982h5.988v5.988H0zM0 17.965h5.988v5.988H0zM17.965 0h5.988v5.988h-5.988zM8.982 0h5.988v5.988H8.982zM17.965 8.982h5.988v5.988h-5.988zM17.965 17.965h5.988v5.988h-5.988z"/>
	</symbol>
</svg>
<main>
	<div class="sections">
		<header class="sections__header">
			<h1 class="title">Poems</h1>
			
		</header>
		<!-- codrops links -->
		<div class="codrops-links">
			<a class="codrops-icon codrops-icon--prev" href="#themes/creative-multipurpose-website-template-free-download/" target="_blank" title="Back to the article"><svg class="icon icon--arrow"><use xlink:href="#icon-arrow"></use></svg></a>
			<a class="codrops-icon codrops-icon--drop" href="#" target="_blank" title="Visit Codrops"><svg class="icon icon--drop"><use xlink:href="#icon-drop"></use></svg></a>
		</div>
		<!-- menu -->

		
		<nav class="menu">
			<ul class="menu__inner">
				<li class="menu__item"><a class="menu__item-link" href="#">诗词生成</a></li>
				<li class="menu__item"><a class="menu__item-link" href="#">关键词生成</a></li>
				<li class="menu__item"><a class="menu__item-link" href="#">场景生成</a></li>
				<li class="menu__item"><a class="menu__item-link" href="#">图片生成</a></li>
			</ul>
            <div id ="text1"></div>

			<div class="menu__toggle">
				<span class="menu__toggle-inner menu__toggle-inner--open">
					<svg class="icon icon--menu"><use xlink:href="#icon-menu"></use></svg>
				</span>
				<span class="menu__toggle-inner menu__toggle-inner--close">
					<svg class="icon icon--close"><use xlink:href="#icon-close"></use></svg>
				</span>
			</div>
		</nav>
		<!-- facts expander with toggles; content for each is in its section -->
		
		<div class="facts">
			<div class="facts__toggle">
				<span class="facts__toggle-inner facts__toggle-inner--more">
					<svg class="icon icon--dot"><use xlink:href="#icon-dot"></use></svg>
					<span class="facts__toggle-text">展开</span>
				</span>
				<span class="facts__toggle-inner facts__toggle-inner--less">
					<svg class="icon icon--cross"><use xlink:href="#icon-cross"></use></svg>
					<span class="facts__toggle-text">收起</span>
				</span>
			</div>
			<button class="button-contentclose">
				<svg class="icon icon--close"><use xlink:href="#icon-close"></use></svg>
			</button>
		</div>
		
		<!-- index -->
		<div class="sections__index">
			<span class="sections__index-current">
				<span class="sections__index-inner">01</span>
			</span>
			<span class="sections__index-total">04</span>
		</div>
		<!-- navigation down -->
		<nav class="sections__nav">
			<button class="sections__nav-item sections__nav-item--prev">
				<svg class="icon icon--navup"><use xlink:href="#icon-navup"></use></svg>
			</button>
			<button class="sections__nav-item sections__nav-item--next">
				<svg class="icon icon--navdown"><use xlink:href="#icon-navdown"></use></svg>
			</button>
             <div id="box1">

                <input type="text" id ="txt1" placeholder="请输入关键词" style="display:none">
                <input type="button" value="提交" class="button" id="btn2" style="display:none">

        </div>
            <div id="box2">

                <input type="text" id ="txt3" placeholder="请输入场景" style="display:none">
                <input type="button" value="提交" class="button" id="btn5" style="display:none">

        </div>
		</nav>


		<!-- sections -->
		<section class="section section--current">
			<div class="section__content">
				<h2 class="section__title" >诗词生成</h2>
				<p class="section__description"><span class="section__description-inner">欲买桂花同载酒，终不似，少年游。</span></p>
			</div>
			<div class="section__img">
				<div class="section__img-inner" style="background-image: url(../static/js/img/1.jpg)"></div>
			</div>
			<div class="section__more">
				<div class="section__more-inner section__more-inner--bg1">
					<span class="section__more-text">更多</span>
					<a href="#theme_tag/free/" target="_blank" class="section__more-link">
						<span class="section__more-linktext">跳转至新页面</span>
						<svg class="icon icon--arrowlong"><use xlink:href="#icon-arrowlong"></use></svg>
					</a>
				</div>
			</div>
			<div class="section__expander"></div>
			<ul class="section__facts">
				<li class="section__facts-item">
					<h3 class="section__facts-title">自动生成</h3>
					<span class="section__facts-detail">基于深度学习与神经网络</span>
					
				</li>
				<li class="section__facts-item">
					<h3 class="section__facts-title">从场景中提取关键词</h3>
					<span class="section__facts-detail">NLP自然语言处理</span>
				</li>
				<li class="section__facts-item">
					<h3 class="section__facts-title">图片识别</h3>
					<span class="section__facts-detail">基于训练集的图片识别功能</span>
				</li>
				<li class="section__facts-item section__facts-item--clickable" data-gallery="gallery1">
					<div class="section__facts-img">
						<img src="../static/js/img/thumb1.jpg" alt="Some image"/>
						<svg class="icon icon--grid"><use xlink:href="#icon-grid"></use></svg>
					</div>
					<h3 class="section__facts-title">更多</h3>
					<span class="section__facts-detail"></span>
				</li>
			</ul>
			<div class="section__gallery" id="gallery1">
				<h3 class="section__gallery-item section__gallery-item--title">示例图</h3>
				<a class="section__gallery-item" href="#"><img src="../static/js/img/thumb1.jpg" alt="Some image"/></a>
				<a class="section__gallery-item" href="#"><img src="../static/js/img/thumb2.jpg" alt="Some image"/></a>
				<a class="section__gallery-item" href="#"><img src="../static/js/img/thumb3.jpg" alt="Some image"/></a>
				<a class="section__gallery-item" href="#"><img src="../static/js/img/thumb4.jpg" alt="Some image"/></a>
				<a class="section__gallery-item" href="#"><img src="../static/js/img/thumb5.jpg" alt="Some image"/></a>
				<a class="section__gallery-item" href="#"><img src="../static/js/img/thumb6.jpg" alt="Some image"/></a>
			</div>
		</section><!--/ section -->
		
		<section class="section">
			<div class="section__content">
				<button class="section__title" id="title1">关键词</button>
				<p class="section__description"><span class="section__description-inner">根据所给关键词随机生成五言或七言律诗</span></p>
			</div>
			<div class="section__img">
				<div class="section__img-inner" style="background-image: url(../static/js/img/2.jpg)"></div>
			</div>
			<div class="section__more">
				<div class="section__more-inner section__more-inner--bg2">
					<span class="section__more-text">更多</span>
					<a href="#" class="section__more-link">
						<span class="section__more-linktext">跳转至新页面</span>
						<svg class="icon icon--arrowlong"><use xlink:href="#icon-arrowlong"></use></svg>
					</a>
				</div>
			</div>
			<div class="section__expander"></div>
			<ul class="section__facts">
				<li class="section__facts-item">
					<h3 class="section__facts-title">自动生成</h3>
					<span class="section__facts-detail">基于深度学习与神经网络</span>
				</li>
				<li class="section__facts-item">
					<h3 class="section__facts-title">从场景中提取关键词</h3>
					<span class="section__facts-detail">NLP自然语言处理</span>
				</li>
				<li class="section__facts-item">
					<h3 class="section__facts-title">图片识别</h3>
					<span class="section__facts-detail">基于训练集的图片识别功能</span>
				</li>
				<li class="section__facts-item section__facts-item--clickable" data-gallery="gallery2">
					<div class="section__facts-img">
						<img src="../static/js/img/thumb2.jpg" alt="Some image"/>
						<svg class="icon icon--grid"><use xlink:href="#icon-grid"></use></svg>
					</div>
					<h3 class="section__facts-title"></h3>
					<span class="section__facts-detail"></span>
				</li>
			</ul>
			<div class="section__gallery" id="gallery2">
				<h3 class="section__gallery-item section__gallery-item--title">More impressions</h3>
				<a class="section__gallery-item" href="#"><img src="../static/js/img/thumb5.jpg" alt="Some image"/></a>
				<a class="section__gallery-item" href="#"><img src="../static/js/img/thumb6.jpg" alt="Some image"/></a>
				<a class="section__gallery-item" href="#"><img src="../static/js/img/thumb1.jpg" alt="Some image"/></a>
				<a class="section__gallery-item" href="#"><img src="../static/js/img/thumb2.jpg" alt="Some image"/></a>
				<a class="section__gallery-item" href="#"><img src="../static/js/img/thumb3.jpg" alt="Some image"/></a>
				<a class="section__gallery-item" href="#"><img src="../static/js/img/thumb4.jpg" alt="Some image"/></a>
			</div>
		</section><!--/ section -->
		<section class="section">
			<div class="section__content">
				<button class="section__title" id="title2">场景</button>
                <script>
                    window.onload =function(){
                    var Title1 =document.getElementById("title1");
                    var Title2 =document.getElementById("title2");
                    Title1.onclick=function(){
                       document.getElementById("txt1").style.display="block";
                       document.getElementById("btn2").style.display="block";

                   }
                   Title2.onclick=function(){
                        document.getElementById("txt3").style.display="block";
                        document.getElementById("btn5").style.display="block";

                   }
                   }

                </script>
				<p class="section__description"><span class="section__description-inner">根据所输入的场景，提取出其中的关键词，自动生成相关诗词。</span></p>
			</div>
			<div class="section__img">
				<div class="section__img-inner" style="background-image: url(../static/js/img/3.jpg)"></div>
			</div>
			<div class="section__more">
				<div class="section__more-inner section__more-inner--bg3">
					<span class="section__more-text">更多</span>
					<a href="#" class="section__more-link">
						<span class="section__more-linktext">跳转至新页面</span>
						<svg class="icon icon--arrowlong"><use xlink:href="#icon-arrowlong"></use></svg>
					</a>
				</div>
			</div>
			<div class="section__expander"></div>
			<ul class="section__facts">
				<li class="section__facts-item">
					<h3 class="section__facts-title">自动生成</h3>
					<span class="section__facts-detail">基于深度学习与神经网络</span>
				</li>
				<li class="section__facts-item">
					<h3 class="section__facts-title">从场景中提取关键词</h3>
					<span class="section__facts-detail">NLP自然语言处理</span>
				</li>
				<li class="section__facts-item">
					<h3 class="section__facts-title">图片识别</h3>
					<span class="section__facts-detail">基于训练集的图片识别功能</span>
				</li>
				
					<li class="section__facts-item">
					<h3 class="section__facts-title"></h3>
					<span class="section__facts-detail"></span>
				</li>
				
			</ul>
		</section><!--/ section -->
		<section class="section">
			<div class="section__content">
				<h2 class="section__title">图片识别</h2>
				<p class="section__description"><span class="section__description-inner">根据所上传的图片，识别出其中的物体，据此自动生成诗词。</span></p>
			</div>
			<div class="section__img">
				<div class="section__img-inner" style="background-image: url(../static/js/img/4.jpg)"></div>
			</div>
			<div class="section__more">
				<div class="section__more-inner section__more-inner--bg4">
					<span class="section__more-text">更多</span>
					<a href="#" class="section__more-link">
						<span class="section__more-linktext">跳转至新页面</span>
						<svg class="icon icon--arrowlong"><use xlink:href="#icon-arrowlong"></use></svg>
					</a>
				</div>
			</div>
			<div class="section__expander"></div>
			<ul class="section__facts">
				<li class="section__facts-item">
					<h3 class="section__facts-title">自动生成</h3>
					<span class="section__facts-detail">基于深度学习与神经网络</span>
				</li>
				<li class="section__facts-item">
					<h3 class="section__facts-title">从场景中提取关键词</h3>
					<span class="section__facts-detail">NLP自然语言处理</span>
				</li>
				<li class="section__facts-item">
					<h3 class="section__facts-title">图片识别</h3>
					<span class="section__facts-detail">基于训练集的图片识别功能</span>
				</li>
				<li class="section__facts-item">
					<h3 class="section__facts-title">训练模型</h3>
					<span class="section__facts-detail">训练生成效果与模型密切相关</span>
				</li>
			</ul>
		</section><!--/ section -->
	</div><!--/ sections -->
</main>
<script src="../static/js/imagesloaded.pkgd.min.js"></script>
<script src="../static/js/charming.min.js"></script>
<script src="../static/js/anime.min.js"></script>
<script src="../static/js/main.js"></script>
<script src="../static/js/test.js"></script>

<form id="myForm" action="" method="post" enctype="multipart/form-data">
<input type="file" value="" name="pic" id = "input_file"
          accept="image/gif,image/jpeg,image/jpg,image/png,image/svg"  onchange="checkpic()"/>

</form>
<script>

function checkpic() {

var form = document.getElementById("myForm");
var formData = new FormData(form);
formData.append('pic', $('#input_file')[0].files[0],);
//ajax请求
$.ajax({
            type: "post",
            url:  "/test",
            data: formData,
            dataType: 'json',
            processData: false, // 告诉jQuery不要去处理发送的数据
            contentType: false, // 告诉jQuery不要去设置Content-Type请求头
            xhrFields:{withCredentials:true},
            async: true,    //默认是true：异步，false：同步。
            success: function (data) {
                callback(data);
            },
            error: function (data) {
               alert('请求异常');
            },
        });
}



</script>

</body>
</html>